<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>

    <meta content="width=device-width, initial-scale=1" name="viewport"/>
    <meta charset="UTF-8">
    <meta name="description" content="Admin Dashboard Template" />
    <meta name="keywords" content="admin,dashboard" />
    <meta name="author" content="Steelcoders" />




    <link href="/assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="/assets/plugins/line-icons/simple-line-icons.css" rel="stylesheet" type="text/css"/>
    <link href="/assets/plugins/waves/waves.min.css" rel="stylesheet" type="text/css"/>
    <link href="/assets/plugins/3d-bold-navigation/css/style.css" rel="stylesheet" type="text/css"/>
    <link href="/assets/plugins/fontawesome/css/font-awesome.css" rel="stylesheet" type="text/css"/>



    <!-- Theme Styles -->
    <link href="/assets/css/modern.min.css" rel="stylesheet" type="text/css"/>
    <link href="/assets/css/themes/green.css" class="theme-color" rel="stylesheet" type="text/css"/>
    <link href="/assets/css/custom.css" rel="stylesheet" type="text/css"/>
    
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

</head>
<body>
<main class="page-content content-wrap">
    <div class="navbar">
        <div class="navbar-inner">
            <div class="sidebar-pusher">
                <a class="waves-effect waves-button waves-classic push-sidebar" href="javascript:void(0);">
                    <i class="fa fa-bars"></i>
                </a>
            </div>
            <div class="logo-box">
                <a class="logo-text" href=""><span></span></a>
            </div><!-- Logo Box -->
            <div class="search-button">
                <a class="waves-effect waves-button waves-classic show-search" href="javascript:void(0);"><i class="fa fa-search"></i></a>
            </div>
            <div class="topmenu-outer">
                <div class="top-menu">

                    <ul class="nav navbar-nav navbar-right">
                        <li>
                            <a class="waves-effect waves-button waves-classic show-search" href="javascript:void(0);"><i class="fa fa-search"></i></a>
                        </li>

                        <li class="dropdown">
                            <a data-toggle="dropdown" class="dropdown-toggle waves-effect waves-button waves-classic" href="#">
                                <span class="user-name"><%= currentUser.name %></span>
                                <img width="40" height="40" alt="" src="assets/images/avatar1.png" class="img-circle avatar">
                            </a>

                        </li>
                        <li>
                            <a class="log-out waves-effect waves-button waves-classic" href="/logout">
                                <span><i class="fa fa-sign-out m-r-xs"></i>Log out</span>
                            </a>
                        </li>

                    </ul><!-- Nav -->
                </div><!-- Top Menu -->
            </div>
        </div>
    </div><!-- Navbar -->
    <div class="page-sidebar sidebar">
        <div class="slimScrollDiv" style="position: relative; overflow: hidden; width: auto; height: 100%;"><div class="page-sidebar-inner slimscroll" style="overflow: hidden; width: auto; height: 100%;">

            <ul class="menu accordion-menu">
                <li class="active"><a class="waves-effect waves-button" href="/main-page"><span class="menu-icon glyphicon glyphicon-home"></span><p>首页</p></a></li>
                <li><a href="employee-list.html" class="waves-effect waves-button"><span class="menu-icon glyphicon glyphicon-user"></span><p>人员汇总</p><span class="arrow"></span></a>
                    <ul style="display: none;" class="sub-menu">
                        <li><a href="employee-list.html">人员汇总</a></li>
                        <li class="active"><a href="employee-add.html">新增人员</a></li>
                    </ul>
                </li>
                <li class="droplink">
                    <a class="waves-effect waves-button" href="#">
                        <span class="menu-icon glyphicon glyphicon-envelope"></span><p>邮件</p><span class="arrow"></span></a>
                      <ul class="sub-menu" style="display: none;">
                        <li><a href="">全部邮件组</a></li>
                        <li><a href="">新建邮件组</a></li>
                     </ul>
                </li>

            </ul>
        </div>
        </div>
    </div><!-- Page Sidebar -->
    <div class="page-inner" style="min-height:1088px !important">

        <div id="main-wrapper">
            <div class="row">
                <div class="col-md-12">
                    <div class="panel panel-white">
                        <div class="panel-heading clearfix">
                            <h4 class="panel-title">收集信息收集信息</h4>
                        </div>
                        <div class="panel-body">
                            <div class="table-responsive">
                                <table class="table">
                                    <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>姓名</th>
                                        <th>Email</th>
                                        <th>电话</th>
                                        <th>主题</th>
                                        <th>操作</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <% for(var i = 0;i < data.length;i++){ %>
                                        <tr>
                                                <th scope="row"><div><%- (i + 1) %></div></th>
                                                <td><div><%- data[i].name %></div></td>
                                                <td><div><%- data[i].email %></div></td>
                                                <td><div>-</div></td>
                                                <td><div><%- data[i].subject %></div></td>
                                                <td>
                                                    <button class="btn btn-default btn-rounded" type="button" onclick="showDetail(<%= i %>)"><i class="icon-layers"></i> 详细信息</button>
                                                </td>
                                            </tr>
                                            <tr class="table-inside" style="display:none" id="detail-<%=i%>">

                                                    <td colspan="6">
                                                        <div class="table-i-m">
                                                            <%- data[i].message %>
                                                        </div>
                                                    </td>
            
                                                </tr>
                                    <%}%>
                                    <!-- <tr>
                                        <th scope="row"><div>1</div></th>
                                        <td><div>Table cell</div></td>
                                        <td><div>Table cell</div></td>
                                        <td><div>Table cell</div></td>
                                        <td><div>Table cell</div></td>
                                        <td>
                                            <button class="btn btn-default btn-rounded" type="button"><i class="icon-layers"></i> 详细信息</button>
                                        </td>
                                    </tr>
                                    
                                    <tr>
                                        <th scope="row"><div>2</div></th>
                                        <td><div>Table cell</div></td>
                                        <td><div>Table cell</div></td>
                                        <td><div>Table cell</div></td>
                                        <td><div>Table cell</div></td>
                                        <td>
                                            <button class="btn btn-default btn-rounded" type="button"><i class="icon-layers"></i> 详细信息</button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th scope="row"><div>3</div></th>
                                        <td><div>Table cell</div></td>
                                        <td><div>Table cell</div></td>
                                        <td><div>Table cell</div></td>
                                        <td><div>Table cell</div></td>
                                        <td>
                                            <button class="btn btn-default btn-rounded" type="button"><i class="icon-layers"></i> 详细信息</button>
                                        </td>
                                    </tr> -->
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div><!-- Main Wrapper -->

    </div><!-- Page Inner -->
</main>
</body>
<script type="text/javascript">
    function showDetail(id){
        if($("#detail-" + id).css("display") == "none"){
            $("#detail-" + id).css("display","block");
        }else{
            $("#detail-" + id).css("display","none");
        }
    }
</script>
</html>